<template>
  <div class="sms-management">
    <el-container :style="{ height: tableHeight + 'px'}">
      <!-- 左侧导航 -->
        <el-tabs :tab-position="tabPosition" type="card">
			<el-tab-pane label="系统消息">系统消息</el-tab-pane>
            <el-tab-pane label="我的消息">
				 <div class="package-container">
				    <!-- 标题和操作栏 -->
				    <div class="header">
				      <h1 class="page-title">消息列表</h1>
				      <div class="action-bar">
				        <el-button type="primary">提交消息</el-button>
				        <el-button>返回</el-button>
				        <span class="selection-info">选择1/10 个包层</span>
				      </div>
				    </div>
				
				    <!-- 搜索筛选区域 -->
				    
				
				    <!-- 包裹列表 -->
				    
				 </div>
			</el-tab-pane>
            
            <el-tab-pane label="短信管理">
				<!-- 右侧内容 -->
				      <el-main style="padding: 0;">
				        <!-- 顶部状态栏 -->
				        <div class="status-bar">
				          <div class="status-info">
				            <span class="label">短信管理 · 实时更新</span>
				            <span class="divider">|</span>
				            <span class="expire">有效期至2020-12-31</span>
				            <span class="divider">|</span>
				            <span class="remain">剩余100条</span>
				            <el-button type="primary" size="mini" class="renew-btn">续费</el-button>
				          </div>
				          <div class="tip">请在有效期内使用短信，过期将无法使用</div>
				        </div>
				
				        <!-- 筛选区域 -->
				        <el-form :inline="true" class="filter-form">
				          <el-form-item label="选择课程">
				            <el-select v-model="filter.course" placeholder="请选择课程">
				              <el-option label="课程A" value="1"></el-option>
				              <el-option label="课程B" value="2"></el-option>
				            </el-select>
				          </el-form-item>
				
				          <el-form-item label="选择运营计划">
				            <el-select v-model="filter.plan" placeholder="请选择运营计划">
				              <el-option label="计划A" value="1"></el-option>
				              <el-option label="计划B" value="2"></el-option>
				            </el-select>
				          </el-form-item>
				
				          <el-form-item label="类型">
				            <el-select v-model="filter.type" placeholder="全部">
				              <el-option label="类型A" value="1"></el-option>
				              <el-option label="类型B" value="2"></el-option>
				            </el-select>
				          </el-form-item>
				
				          <el-form-item label="状态">
				            <el-select v-model="filter.status" placeholder="全部">
				              <el-option label="已发送" value="1"></el-option>
				              <el-option label="未发送" value="2"></el-option>
				            </el-select>
				          </el-form-item>
				
				          <el-form-item label="发送时间">
				            <el-date-picker
				              v-model="filter.dateRange"
				              type="daterange"
				              range-separator="至"
				              start-placeholder="开始日期"
				              end-placeholder="结束日期">
				            </el-date-picker>
				          </el-form-item>
				
				          <el-form-item>
				            <el-button type="primary">搜索</el-button>
				            <el-button>导出</el-button>
				          </el-form-item>
				        </el-form>
				
				        <!-- 数据表格 -->
				        <el-table :data="tableData" style="width: 100%" empty-text="暂无数据">
				          <el-table-column prop="sendTime" label="发送时间" width="180"></el-table-column>
				          <el-table-column prop="course" label="课程/运营计划" width="200"></el-table-column>
				          <el-table-column prop="type" label="类型" width="120"></el-table-column>
				          <el-table-column prop="content" label="短信内容"></el-table-column>
				          <el-table-column prop="plan" label="实际/计划" width="120"></el-table-column>
				          <el-table-column prop="status" label="状态" width="100">
				            <template slot-scope="scope">
				              <el-tag :type="scope.row.status | statusTypeFilter">
				                {{ scope.row.status }}
				              </el-tag>
				            </template>
				          </el-table-column>
				          <el-table-column label="操作" width="120">
				            <template slot-scope="scope">
				              <el-button type="text">查看</el-button>
				            </template>
				          </el-table-column>
				        </el-table>
					</el-main>
			</el-tab-pane>
          </el-tabs>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
	  activeName: 'first',
	  tabPosition:'top',
	  tableHeight:'', // table的高度，以便超出高度显示滚动条
	  currentHeight:'', // 用于计算table的高度，以便超出高度显示滚动条
      filter: {
        course: '',
        plan: '',
        type: '',
        status: '',
        dateRange: []
      },
      tableData: [], // 示例数据为空
	  quickFilters: [
	          { label: '全群', count: 0 },
	          { label: '已到仓库', count: 2 },
	          { label: '已提交', count: 1 },
	          { label: '已结束', count: 0 }
	        ],
	        packages: [
	          {
	            number: 'AUPRCO01992',
	            operation: '包层入库后退出',
	            time: '2020-02-25 10:20',
	            weight: '3KG',
	            status: '已到仓库'
	          },
	          {
	            number: 'AUPRCO01993',
	            operation: '包层入库后退出 保留值',
	            time: '2020-02-26 11:30',
	            weight: '5KG',
	            status: '已卸客'
	          }
	        ]
    }
  },
  filters: {
    statusTypeFilter(status) {
      return status === '已发送' ? 'success' : 'info'
    }
  },
  mounted() {
  	this.currentHeight = this.$getHeights();
  	this.getTableHeight();
  },
  methods: {
    handleMenuSelect(index) {
      this.activeMenu = index
    },
	// 用于计算table的高度，以便超出高度显示滚动条
	getTableHeight(){
		let headerHeight = this.currentHeight.mainHeight
		let feetHeight = this.currentHeight.feetHeight
		let lastHeight = this.currentHeight.lastHeight
		this.tableHeight = this.currentHeight.windowHeight - headerHeight*1.5
		console.log(this.tableHeight,'this.tableHeightthis.tableHeight');
	},
	viewDetail(row) {
	  console.log('查看详情:', row)
	},
	submitMessage(row) {
	  console.log('提交消息:', row)
	}
  }
}
</script>

<style lang="less" scoped>
.sms-management {
  height: 100%;
  /deep/ .el-tabs__content{
	  padding: 20px 30px;
  }
}
.package-container {

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    .page-title {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }

    .action-bar {
      .selection-info {
        margin-left: 20px;
        color: #909399;
      }
    }
  }

  .search-box {
    margin-bottom: 20px;

    .quick-filter {
      margin-top: 15px;
      .filter-btn {
        margin-right: 25px;
        color: #606266;
        &:hover {
          color: #409EFF;
        }
      }
    }
  }

  .package-list {
    .package-number {
      display: flex;
      align-items: center;
      .el-tag {
        margin-left: 10px;
      }
    }

    .status-info {
      .time {
        color: #909399;
        font-size: 12px;
        margin-top: 5px;
      }
    }

    .batch-actions {
      margin-top: 15px;
      .record-info {
        color: #909399;
        margin-left: 20px;
      }
    }
  }
  }
.side-menu {
  border-right: none;
  
}

.status-bar {
  background: #f8f9fa;
  
  border-radius: 4px;
}

.status-info {
  display: flex;
  align-items: center;
  
}

.label {
  font-weight: bold;
  color: #303133;
}

.divider {
  margin: 0 12px;
  color: #dcdfe6;
}

.expire {
  color: #606266;
}

.remain {
  color: #67C23A;
}

.renew-btn {
  margin-left: 20px;
  
}

.tip {
  color: #909399;
  font-size: 12px;
}

.filter-form {
  
}

.footer-tips {
  height: 100px;
	width: 100%;
	padding: 12px;
	position: fixed;
	text-align: center;
	// top: 0;
	bottom: -10px;
	left: 168px;
	right: 0;
	.feetBtn{
		display: flex;
		justify-content: start;
		align-items: center;
		flex-wrap: wrap;
		gap: 8px;
	}
}

.empty-tip {
  font-size: 14px;
  margin-bottom: 10px;
}

.el-table::before {
  height: 0; /* 去除表格底部线 */
}
</style>